import { defineComponent, ref, reactive } from 'vue';

export default defineComponent({
  name: 'staticTable',
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableBorderColor: {
      type: String,
      default: '#ddd',
    },
    cellHeight: {
      type: Number,
      default: 40,
    },
    headerStyle: {
      type: Object,
      default: () => ({
        background: '#f5f7fa',
        color: '#333',
      }),
    },
    cellStyle: {
      type: Object,
      default: () => ({
        background: '#fff',
        color: '#333',
      }),
    },
  },
  setup(props) {
    const renderPanelBody = () => {
      return (
        <table
          style={{
            border: `1px solid ${props.tableBorderColor}`,
            borderBottom: 'none',
            borderLeft: 'none',
            width: '100%',
          }}
        >
          <tbody style={{ width: '100%' }}>
            {props.tableData.map((item) => renderTableColumn(item))}
          </tbody>
        </table>
      );
    };

    const renderTableColumn = (colOptions) => {
      return (
        <tr class="flexBox" style={{ width: '100%' }}>
          {colOptions.map((item) => {
            return (
              <td
                class="flexBox flex-1 "
                style={{ borderBottom: `1px solid ${props.tableBorderColor}` }}
              >
                <span
                  class="flexBox"
                  style={{
                    ...props.headerStyle,
                    minWidth: '100px',
                    flex: 1,
                    height: `${props.cellHeight}px`,
                    borderLeft: `1px solid ${props.tableBorderColor}`,
                  }}
                >
                  {item.name}
                </span>
                <span
                  class="flexBox "
                  style={{
                    ...props.cellStyle,
                    padding: '0 25px',
                    minWidth: '100px',
                    borderLeft: `1px solid ${props.tableBorderColor}`,
                    height: `${props.cellHeight}px`,
                    flex: 2,
                  }}
                >
                  {item.value}
                </span>
              </td>
            );
          })}
        </tr>
      );
    };

    return () => <section class="nui-scroll nui-scroll-x">{renderPanelBody()}</section>;
  },
});
